<project-header class="top-header"></project-header>
  <project-page>


        <div class="middle-content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12">



                <div ng-if="kindSelector.selected.kind === 'All' || kindSelector.selected.kind === 'Pods'">
                  <h2>Pods</h2>
                  <div class="list-view-pf">
                    <div class="list-group-item" ng-if="!(filteredPods | hashSize)">
                      <div class="list-view-pf-main-info">
                        <em>
                          <span ng-if="!(pods | hashSize)">
                            There are no pods in this project.
                          </span>
                          <span ng-if="pods | hashSize">
                            The current filters are hiding all pods.
                          </span>
                        </em>
                      </div>
                    </div>
                    <div class="list-group-item list-group-item-expandable"
                         ng-repeat-start="pod in filteredPods track by (pod | uid)"
                         ng-click="expanded = !expanded; toggleItem(pod, expanded)"
                         ng-class="{'expanded': expanded}">
                      <div class="list-view-pf-checkbox">
                        <a href="">
                          <span ng-if="expanded">
                            <span class="fa fa-angle-down"></span>
                            <span class="sr-only">Collapse</span>
                          </span>
                          <span ng-if="!expanded">
                            <span class="fa fa-angle-right"></span>
                            <span class="sr-only">Expand</span>
                          </span>
                        </a>
                      </div>

                      <div class="list-view-pf-main-info">
                        <div class="list-view-pf-body">
                          <div class="list-view-pf-description">
                            <div class="list-group-item-heading">
                              {{pod.metadata.name}}
                              <span ng-if="pod | isTroubledPod">
                                <pod-warnings pod="pod"></pod-warnings>
                              </span>
                              <small>created <relative-timestamp timestamp="pod.metadata.creationTimestamp"></relative-timestamp></small>
                            </div>
                            <div class="list-group-item-text">
                              <status-icon status="pod | podStatus" disable-animation fixed-width="true"></status-icon>
                              {{pod | podStatus | sentenceCase}}
                            </div>
                          </div>
                          <div class="list-view-pf-additional-info">
                            <div class="list-view-pf-additional-info-item">
                              <span class="pficon pficon-image"></span>
                              <span>{{pod.spec.containers[0].image | imageStreamName}}</span>
                              <span ng-if="sha = (pod.spec.containers[0].image | imageSHA)" title="{{sha}}">
                                <span>@</span><span class="hash">{{sha | stripSHAPrefix | limitTo: 7}}</span>
                              </span>
                              <span ng-if="pod.spec.containers.length > 1" class="mar-left-xs">and {{pod.spec.containers.length - 1}} other image<span ng-if="pod.spec.containers.length > 2">s</span></span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div ng-repeat-end ng-if="expanded" class="list-group-expanded-section" ng-class="{'expanded': expanded}">
                      <log-viewer
                        ng-if="'pods/log' | canI : 'get'"
                        resource="pods/log"
                        name="pod.metadata.name"
                        context="projectContext"
                        options="logOptions.pods[pod.metadata.name]"
                        empty="logEmpty.pods[pod.metadata.name]"
                        run="logCanRun.pods[pod.metadata.name]"
                        fixed-height="250"
                        full-log-url="(pod | navigateResourceURL) + '?view=chromeless'">

                        <label for="selectLogContainer">Container:</label>

                        <span ng-if="pod.spec.containers.length === 1">
                          {{pod.spec.containers[0].name}}
                        </span>

                        <select
                          id="selectLogContainer"
                          ng-if="pod.spec.containers.length > 1"
                          ng-model="logOptions.pods[pod.metadata.name].container"
                          ng-options="container.name as container.name for container in pod.spec.containers"
                          ng-init="logOptions.pods[pod.metadata.name].container = pod.spec.containers[0].name">
                        </select>

                        <span ng-if="containerStateReason || containerStatusKey">
                          <span class="dash">&mdash;</span>
                          <status-icon status="containerStateReason || (containerStatusKey | capitalize)"></status-icon>
                          <span>{{containerStateReason || containerStatusKey | sentenceCase}}</span>
                        </span>

                        <span ng-if="containerStartTime && !logEmpty.pods[pod.metadata.name]">
                          <span class="log-timestamps">Log from {{containerStartTime  | date : 'short'}} <span ng-if="containerEndTime">to {{containerEndTime  | date : 'short'}}</span></span>
                        </span>

                      </log-viewer>
                      <!-- Until the metrics directive pulls the metrics from the time range of the life of the pod, hide the metrics for old stuff -->
                      <div class="mar-top-lg" ng-if="metricsAvailable">
                        <metrics pod="pod"></metrics>
                      </div>
                    </div>
                  </div>
                </div>

              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
